<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../static/css/public.css" />
	<style type="text/css">
		ol{
			margin-left: 2em;
		}
		li{
			padding: 5px 0;
		}
	</style>
</head>
<body>
	<!-- 回到顶部 -->
	<div class="topBtn">
		<a href="#top">
			<i class="fa fa-long-arrow-up"></i>
		</a>
	</div>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div class="Table" v-cloak id="top">
				<div class="TableRow" v-for="(el,index) in list">
					<a class="RowLeft" 
					:title="el.name"
					:href="'#'+el.id">{{el.name}}</a>
					<span class="RowRight">{{el.explain}}</span>
				</div>
			</div>
			<div>
				<h4 id="Number">document.execCommand()</h4>
				<p>复制粘贴板</p>
				<pre>
		function copy(e) {
		    let transfer = document.createElement('input');
		    document.body.appendChild(transfer);
		    transfer.value = target.value;  // 这里表示想要复制的内容
		    transfer.focus();
		    transfer.select();
		    if (document.execCommand('copy')) {
		        document.execCommand('copy');
		    }
		    transfer.blur();
		    console.log('复制成功');
		    document.body.removeChild(transfer);
		    
		}
		​
		$('#copyBtn').addEventListener('click', copy);			
				</pre>
				<div>
					hello world <button @click="copy">赋值</button>
				</div>
				<div>
					<input type="" name="" id="" value="" />
				</div>
			</div>
			<div>
				<h4 id="parseInt">复制 url</h4>
				<pre>
	&lt;input onclick="copyUrl(this)" value="复制URL地址"&gt;
	
	function copyUrl(){
		var clipBoardContent=this.location.href;
		window.clipboardData.setData("Text",clipBoardContent)
	}
	
	// 复制专题地址和 url 地址，传给 QQ/MSN 上的好友
	function copyToClipBoard(){
		var clipBoardContent="";
		clipBoardContent+=document.title;
		clipBoardContent+="";
		clipBoardContent+=this.location.href;
		window.clipboardData.setData("Text",clipBoardContent);
	}
				</pre>
			</div>
			<div>
				<h4 id="pop">直接复制</h4>
				<pre>
	&lt;input onclick="oCopy(this)" value="你好.要copy的内容!"&gt;
	
	function oCopy(obj){
		obj.select();
		js=obj.createTextRange();
		js.execCommand("Copy")
		alert("复制成功!");
	}
				</pre>
			</div>
			<div>
				<h4 id="shift">浏览器兼容</h4>
				<pre>
	function copyToClipboard(txt) {
	   if (window.clipboardData) {
	    window.clipboardData.clearData();
	    clipboardData.setData("Text", txt);
	    alert("复制成功！");
	  
	   } else if (navigator.userAgent.indexOf("Opera") != -1) {
	    window.location = txt;
	   } else if (window.netscape) {
	    try {
	     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	    } catch (e) {
	     alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
	    }
	    var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
	    if (!clip)
	     return;
	    var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
	    if (!trans)
	     return;
	    trans.addDataFlavor("text/unicode");
	    var str = new Object();
	    var len = new Object();
	    var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
	    var copytext = txt;
	    str.data = copytext;
	    trans.setTransferData("text/unicode", str, copytext.length * 2);
	    var clipid = Components.interfaces.nsIClipboard;
	    if (!clip)
	     return false;
	    clip.setData(trans, null, clipid.kGlobalClipboard);
	    alert("复制成功！");
	   }
    }				
				</pre>
			</div>
		</div>
	</div>
	<!--页面加载进度条-->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<!--定义数据-->
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function () {
				return {
					copyVal:'hello world  复制成功!!!!!',
					list:[
						{name:"execCommand()",id:"Number",explain:''},
						{name:"复制 url",id:"parseInt",explain:''},
						{name:"直接复制",id:"pop",explain:''},
						{name:"浏览器兼容",id:"shift",explain:''},
					]
				}
			},
			methods:{
				copy(e) {
				    let transfer = document.createElement('input');
				    document.body.appendChild(transfer);
				    transfer.value = this.copyVal;  // 这里表示想要复制的内容
				    transfer.focus();
				    transfer.select();
				    if (document.execCommand('copy')) {
				        document.execCommand('copy');
				    }
				    transfer.blur();
				    console.log('复制成功');
				    document.body.removeChild(transfer);
				    
				}
			}
		})
	</script>
</body>

</html>